<template>
	<div id="app">
		App
		<!-- <Home v-if="isShow"></Home>
		<About v-else></About> -->

		<!-- 使用router-view进行单页面切换 -->
		<router-view></router-view>
		<!-- 编程式导航
    原理:其实声明式导航的本质就是给a标签绑定了click事件,事件内部使用了编程式导航
     -->
		<router-link to="/home">到HOME</router-link>
		<router-link to="/about">到ABOUT</router-link>
		<!-- 编程式导航 -->
		<div @click="clickHandle">编程式导航实现跳转</div>
	</div>
</template>

<script>
// import Home from "./components/Home.vue";
// import About from "./components/About.vue";
export default {
	name: "App",
	// data() {
	// 	return {
	// 		isShow: true,
	// 	};
	// },
	// components: {
	// 	Home,
	// 	About,
	// },
	methods: {
		clickHandle() {
			console.log("路由对象", this.$route);
			console.log("路由器对象", this.$router);

			this.$router.push("/home");
		},
	},
};
</script>

<style></style>
